<template>
  <div class="tabBox">
    <div class="tab" :class="{active: currentIndex==index }"  v-for="(item,index) in tabs" :key="index">{{item.tabName}}</div>
  </div>
</template>

<script>
export default {
    inject:['tabs','currentIndex']

}
</script>

<style>
    .tabBox{
        width: 60px;
        text-align: center;
    }
    .tabBox .tab{
        margin: 15px 0;
        border-left: 3px solid transparent;
    }
    .tabBox .tab.active{
        font-weight: bold;
        border-left: 3px solid red;
    }

</style>